<script setup>
import { onMounted } from 'vue';
import gsap from 'gsap'

onMounted(() => {
	const timeline = gsap.timeline()

	timeline.fromTo(['#dongxiao'], {
		scale: 0.2,
		y: 50
	}, {
		duration: 1,
		scale: 1,
		y: 0
	})
	.fromTo(['#center-house'], {
		scale: 0.6,
		transformOrigin: 'bottom',
		opacity: 0.2,
		y: 30
	}, {
		duration: 1,
		scale: 1,
		transformOrigin: 'bottom',
		opacity: 1,
		y: 0
	}, '-=1') // '-=1'，代表时间线中的该动画，与上一个动画同时执行
})
</script>

<template>
	<div class="center-svg">
		<svg
			id="dongxiao"
			data-name="dongxiao"
			xmlns="http://www.w3.org/2000/svg"
			xmlns:xlink="http://www.w3.org/1999/xlink"
			width="787.781"
			height="652"
			viewBox="0 0 787.781 652"
		>
			<defs>
				<linearGradient
					id="linear-gradient"
					x1="177.891"
					y1="126.344"
					x2="177.891"
					y2="51.375"
					gradientUnits="userSpaceOnUse"
				>
					<stop offset="0" stop-color="#030000" />
					<stop offset="1" stop-color="#fff" />
				</linearGradient>
				<linearGradient
					id="linear-gradient-2"
					x1="177.891"
					y1="110.344"
					x2="177.891"
					y2="44.719"
					xlink:href="#linear-gradient"
				/>
				<linearGradient
					id="linear-gradient-3"
					x1="177.969"
					y1="90.719"
					x2="177.969"
					y2="-0.625"
					gradientUnits="userSpaceOnUse"
				>
					<stop offset="0" stop-color="#26bbff" />
					<stop offset="1" stop-color="#26bbff" stop-opacity="0" />
				</linearGradient>
				<linearGradient
					id="linear-gradient-4"
					x1="177.969"
					y1="91.219"
					x2="177.969"
					y2="46.875"
					gradientUnits="userSpaceOnUse"
				>
					<stop offset="-0.055" stop-color="#26bbff" />
					<stop offset="1.044" stop-color="#26bbff" stop-opacity="0" />
					<stop offset="1.055" stop-color="#26bbff" />
				</linearGradient>
				<linearGradient
					id="linear-gradient-5"
					x1="178.109"
					y1="87.563"
					x2="178.109"
					y2="38"
					gradientUnits="userSpaceOnUse"
				>
					<stop offset="0" stop-color="#fff" />
					<stop offset="1" stop-color="#fff" stop-opacity="0" />
				</linearGradient>
				<linearGradient
					id="linear-gradient-6"
					x1="718.89"
					y1="414.344"
					x2="718.89"
					y2="339.375"
					xlink:href="#linear-gradient"
				/>
				<linearGradient
					id="linear-gradient-7"
					x1="718.89"
					y1="398.344"
					x2="718.89"
					y2="332.719"
					xlink:href="#linear-gradient"
				/>
				<linearGradient
					id="linear-gradient-8"
					x1="718.969"
					y1="378.719"
					x2="718.969"
					y2="287.375"
					xlink:href="#linear-gradient-3"
				/>
				<linearGradient
					id="linear-gradient-9"
					x1="718.968"
					y1="379.219"
					x2="718.968"
					y2="334.875"
					xlink:href="#linear-gradient-4"
				/>
				<linearGradient
					id="linear-gradient-10"
					x1="719.109"
					y1="375.562"
					x2="719.109"
					y2="326"
					xlink:href="#linear-gradient-5"
				/>
				<linearGradient
					id="linear-gradient-11"
					x1="67.891"
					y1="325.344"
					x2="67.891"
					y2="250.375"
					xlink:href="#linear-gradient"
				/>
				<linearGradient
					id="linear-gradient-12"
					x1="67.891"
					y1="309.344"
					x2="67.891"
					y2="243.719"
					xlink:href="#linear-gradient"
				/>
				<linearGradient
					id="linear-gradient-13"
					x1="67.969"
					y1="289.719"
					x2="67.969"
					y2="198.375"
					xlink:href="#linear-gradient-3"
				/>
				<linearGradient
					id="linear-gradient-14"
					x1="67.969"
					y1="290.219"
					x2="67.969"
					y2="245.875"
					xlink:href="#linear-gradient-4"
				/>
				<linearGradient
					id="linear-gradient-15"
					x1="68.109"
					y1="286.562"
					x2="68.109"
					y2="237"
					xlink:href="#linear-gradient-5"
				/>
				<linearGradient
					id="linear-gradient-16"
					x1="159.891"
					y1="596.344"
					x2="159.891"
					y2="521.375"
					xlink:href="#linear-gradient"
				/>
				<linearGradient
					id="linear-gradient-17"
					x1="159.891"
					y1="580.344"
					x2="159.891"
					y2="514.719"
					xlink:href="#linear-gradient"
				/>
				<linearGradient
					id="linear-gradient-18"
					x1="159.969"
					y1="560.719"
					x2="159.969"
					y2="469.375"
					xlink:href="#linear-gradient-3"
				/>
				<linearGradient
					id="linear-gradient-19"
					x1="159.969"
					y1="561.219"
					x2="159.969"
					y2="516.875"
					xlink:href="#linear-gradient-4"
				/>
				<linearGradient
					id="linear-gradient-20"
					x1="160.109"
					y1="557.562"
					x2="160.109"
					y2="508"
					xlink:href="#linear-gradient-5"
				/>
				<linearGradient
					id="linear-gradient-21"
					x1="581.89"
					y1="623.344"
					x2="581.89"
					y2="548.375"
					xlink:href="#linear-gradient"
				/>
				<linearGradient
					id="linear-gradient-22"
					x1="581.89"
					y1="607.344"
					x2="581.89"
					y2="541.719"
					xlink:href="#linear-gradient"
				/>
				<linearGradient
					id="linear-gradient-23"
					x1="581.969"
					y1="587.719"
					x2="581.969"
					y2="496.375"
					xlink:href="#linear-gradient-3"
				/>
				<linearGradient
					id="linear-gradient-24"
					x1="581.968"
					y1="588.219"
					x2="581.968"
					y2="543.875"
					xlink:href="#linear-gradient-4"
				/>
				<linearGradient
					id="linear-gradient-25"
					x1="582.109"
					y1="584.562"
					x2="582.109"
					y2="535"
					xlink:href="#linear-gradient-5"
				/>
				<linearGradient
					id="linear-gradient-26"
					x1="633.89"
					y1="145.344"
					x2="633.89"
					y2="70.375"
					xlink:href="#linear-gradient"
				/>
				<linearGradient
					id="linear-gradient-27"
					x1="633.89"
					y1="129.344"
					x2="633.89"
					y2="63.719"
					xlink:href="#linear-gradient"
				/>
				<linearGradient
					id="linear-gradient-28"
					x1="633.969"
					y1="109.719"
					x2="633.969"
					y2="18.375"
					xlink:href="#linear-gradient-3"
				/>
				<linearGradient
					id="linear-gradient-29"
					x1="633.968"
					y1="110.219"
					x2="633.968"
					y2="65.875"
					xlink:href="#linear-gradient-4"
				/>
				<linearGradient
					id="linear-gradient-30"
					x1="634.109"
					y1="106.562"
					x2="634.109"
					y2="57"
					xlink:href="#linear-gradient-5"
				/>
				<linearGradient
					id="linear-gradient-31"
					x1="273.219"
					y1="315.25"
					x2="524.25"
					y2="443.156"
					gradientUnits="userSpaceOnUse"
				>
					<stop offset="0" stop-color="#fbab00" />
					<stop offset="0.342" stop-color="#f98100" />
					<stop offset="0.75" stop-color="#f86d00" stop-opacity="0" />
					<stop offset="1" stop-color="#f86000" />
				</linearGradient>
				<linearGradient
					id="linear-gradient-32"
					x1="565.875"
					y1="379.485"
					x2="235.062"
					y2="379.485"
					gradientUnits="userSpaceOnUse"
				>
					<stop offset="0" stop-color="#1b90ff" />
					<stop offset="0.745" stop-color="#0752ff" stop-opacity="0" />
					<stop offset="1" stop-color="#003dff" />
				</linearGradient>
				<linearGradient
					id="linear-gradient-33"
					x1="628.344"
					y1="445.411"
					x2="169.406"
					y2="278.371"
					gradientUnits="userSpaceOnUse"
				>
					<stop offset="0" stop-color="#fbab00" />
					<stop offset="0.342" stop-color="#f98100" />
					<stop offset="1" stop-color="#f86000" stop-opacity="0" />
				</linearGradient>
				<filter
					id="filter"
					x="291"
					y="214"
					width="61"
					height="60"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>
				<filter
					id="filter-2"
					x="258"
					y="155"
					width="61"
					height="61"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>
				<filter
					id="filter-3"
					x="126"
					y="296"
					width="61"
					height="61"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>
				<filter
					id="filter-4"
					x="255"
					y="269"
					width="61"
					height="61"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>
				<filter
					id="filter-5"
					x="226"
					y="510"
					width="60"
					height="61"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>
				<filter
					id="filter-6"
					x="256"
					y="452"
					width="60"
					height="60"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>
				<filter
					id="filter-7"
					x="257"
					y="407"
					width="61"
					height="61"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>
				<filter
					id="filter-8"
					x="247"
					y="83"
					width="59"
					height="59"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>
				<filter
					id="filter-9"
					x="262"
					y="122"
					width="60"
					height="59"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>
				<filter
					id="filter-10"
					x="278"
					y="199"
					width="59"
					height="60"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>
				<filter
					id="filter-11"
					x="112"
					y="294"
					width="59"
					height="59"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>
				<filter
					id="filter-12"
					x="206"
					y="274"
					width="59"
					height="59"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>
				<filter
					id="filter-13"
					x="255"
					y="436"
					width="59"
					height="60"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>
				<filter
					id="filter-14"
					x="238"
					y="500"
					width="59"
					height="59"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>
				<filter
					id="filter-15"
					x="279"
					y="364"
					width="59"
					height="59"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>

				<!-- 蓝色点的滤镜 -->
				<filter
					id="blue-filter-2"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#1783ff" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>

				<!-- 橙色点的滤镜 -->
				<filter
					id="orange-filter-2"
					filterUnits="userSpaceOnUse"
				>
					<feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
					<feComposite result="composite" />
					<feComposite result="composite-2" />
					<feComposite result="composite-3" />
					<feFlood result="flood" flood-color="#f97a00" flood-opacity="0.9" />
					<feComposite result="composite-4" operator="in" in2="composite-3" />
					<feBlend result="blend" in2="SourceGraphic" />
					<feBlend result="blend-2" in="SourceGraphic" />
				</filter>

				<image
					id="image"
					width="23"
					height="23"
					xlink:href="@/assets/images/center/image-1.png"
				/>
				<image
					id="image-2"
					width="15"
					height="15"
					xlink:href="@/assets/images/center/image-2.png"
				/>
			</defs>

			<g id="dongxiao1">
				<g id="icon">
					<path
						id="base_o"
						class="cls-1"
						d="M177.9,51.386c33.127,0,63.736,13.839,67.114,34,3.557,21.237-26.042,40.948-67.114,40.948s-70.671-19.711-67.113-40.948C114.162,65.225,144.771,51.386,177.9,51.386Z"
					/>
					<path
						id="base_t"
						class="cls-2"
						d="M177.9,44.728c33.127,0,63.736,12.114,67.114,29.76,3.557,18.59-26.042,35.844-67.114,35.844s-70.671-17.254-67.113-35.844C114.162,56.842,144.771,44.728,177.9,44.728Z"
					/>
					<path
						id="right_o"
						class="cls-3"
						d="M122.484-.626H233.455L208.447,90.7H147.491Z"
					/>
					<path
						id="right_t"
						class="cls-4"
						d="M112.064,46.866H243.875l-35.428,44.36H147.491Z"
					/>
					<path
						id="line"
						class="cls-5"
						d="M178.105,38c25.911,0,51.58,8.076,56.087,21.076,4.881,14.075-19.143,28.5-56.083,28.5s-60.966-14.426-56.087-28.5C126.527,46.072,152.194,38,178.105,38Z"
					/>
					<image
						id="icon_star_guangzhou"
						x="121"
						y="-3"
						width="112"
						height="112"
						xlink:href="@/assets/images/center/star.png"
					/>
					<path
						id="base_o-2"
						data-name="base_o"
						class="cls-6"
						d="M718.9,339.386c33.127,0,63.736,13.839,67.114,34,3.557,21.237-26.042,40.948-67.114,40.948s-70.671-19.711-67.113-40.948C655.162,353.225,685.771,339.386,718.9,339.386Z"
					/>
					<path
						id="base_t-2"
						data-name="base_t"
						class="cls-7"
						d="M718.9,332.728c33.127,0,63.736,12.114,67.114,29.76,3.557,18.59-26.042,35.844-67.114,35.844s-70.671-17.254-67.113-35.844C655.162,344.842,685.771,332.728,718.9,332.728Z"
					/>
					<path
						id="right_o-2"
						data-name="right_o"
						class="cls-8"
						d="M663.484,287.374H774.455L749.447,378.7H688.491Z"
					/>
					<path
						id="right_t-2"
						data-name="right_t"
						class="cls-9"
						d="M653.064,334.866H784.875l-35.428,44.36H688.491Z"
					/>
					<path
						id="line-2"
						data-name="line"
						class="cls-10"
						d="M719.105,326c25.911,0,51.58,8.076,56.087,21.076,4.881,14.075-19.143,28.5-56.083,28.5s-60.966-14.426-56.087-28.5C667.527,334.072,693.194,326,719.105,326Z"
					/>
					<image
						id="icon_location_zhongshan"
						x="666"
						y="287"
						width="106"
						height="107"
						xlink:href="@/assets/images/center/location.png"
					/>
					<path
						id="base_o-3"
						data-name="base_o"
						class="cls-11"
						d="M67.9,250.386c33.127,0,63.736,13.839,67.114,34,3.557,21.237-26.042,40.948-67.114,40.948S-2.773,305.62.785,284.383C4.162,264.225,34.771,250.386,67.9,250.386Z"
					/>
					<path
						id="base_t-3"
						data-name="base_t"
						class="cls-12"
						d="M67.9,243.728c33.127,0,63.736,12.114,67.114,29.76,3.557,18.59-26.042,35.844-67.114,35.844S-2.773,292.078.785,273.488C4.162,255.842,34.771,243.728,67.9,243.728Z"
					/>
					<path
						id="right_o-3"
						data-name="right_o"
						class="cls-13"
						d="M12.484,198.374H123.455L98.447,289.7H37.491Z"
					/>
					<path
						id="right_t-3"
						data-name="right_t"
						class="cls-14"
						d="M2.064,245.866H133.875l-35.428,44.36H37.491Z"
					/>
					<path
						id="line-3"
						data-name="line"
						class="cls-15"
						d="M68.105,237c25.911,0,51.58,8.076,56.087,21.076,4.881,14.075-19.143,28.5-56.083,28.5s-60.966-14.426-56.088-28.5C16.527,245.072,42.194,237,68.105,237Z"
					/>
					<image
						id="icon_pie_shenzhen"
						x="13"
						y="194"
						width="107"
						height="108"
						xlink:href="@/assets/images/center/pie.png"
					/>
					<path
						id="base_o-4"
						data-name="base_o"
						class="cls-16"
						d="M159.9,521.386c33.127,0,63.736,13.839,67.114,34,3.557,21.237-26.042,40.948-67.114,40.948S89.227,576.62,92.785,555.383C96.162,535.225,126.771,521.386,159.9,521.386Z"
					/>
					<path
						id="base_t-4"
						data-name="base_t"
						class="cls-17"
						d="M159.9,514.728c33.127,0,63.736,12.114,67.114,29.76,3.557,18.59-26.042,35.844-67.114,35.844s-70.671-17.254-67.113-35.844C96.162,526.842,126.771,514.728,159.9,514.728Z"
					/>
					<path
						id="right_o-4"
						data-name="right_o"
						class="cls-18"
						d="M104.484,469.374H215.455L190.447,560.7H129.491Z"
					/>
					<path
						id="right_t-4"
						data-name="right_t"
						class="cls-19"
						d="M94.064,516.866H225.875l-35.428,44.36H129.491Z"
					/>
					<path
						id="line-4"
						data-name="line"
						class="cls-20"
						d="M160.1,508c25.911,0,51.58,8.076,56.087,21.076,4.881,14.075-19.143,28.5-56.083,28.5s-60.966-14.426-56.088-28.5C108.527,516.072,134.194,508,160.1,508Z"
					/>
					<image
						id="icon_earth_dongguan"
						x="106"
						y="460"
						width="111"
						height="112"
						xlink:href="@/assets/images/center/earth.png"
					/>
					<path
						id="base_o-5"
						data-name="base_o"
						class="cls-21"
						d="M581.9,548.386c33.127,0,63.736,13.839,67.114,34,3.557,21.237-26.042,40.948-67.114,40.948s-70.671-19.711-67.113-40.948C518.162,562.225,548.771,548.386,581.9,548.386Z"
					/>
					<path
						id="base_t-5"
						data-name="base_t"
						class="cls-22"
						d="M581.9,541.728c33.127,0,63.736,12.114,67.114,29.76,3.557,18.59-26.042,35.844-67.114,35.844s-70.671-17.254-67.113-35.844C518.162,553.842,548.771,541.728,581.9,541.728Z"
					/>
					<path
						id="right_o-5"
						data-name="right_o"
						class="cls-23"
						d="M526.484,496.374H637.455L612.447,587.7H551.491Z"
					/>
					<path
						id="right_t-5"
						data-name="right_t"
						class="cls-24"
						d="M516.064,543.866H647.875l-35.428,44.36H551.491Z"
					/>
					<path
						id="line-5"
						data-name="line"
						class="cls-25"
						d="M582.105,535c25.911,0,51.58,8.076,56.087,21.076,4.881,14.075-19.143,28.5-56.083,28.5s-60.966-14.426-56.087-28.5C530.527,543.072,556.194,535,582.105,535Z"
					/>
					<image
						id="icon_hot_zhuhai"
						x="530"
						y="495"
						width="105"
						height="105"
						xlink:href="@/assets/images/center/hot.png"
					/>
					<path
						id="base_o-6"
						data-name="base_o"
						class="cls-26"
						d="M633.9,70.386c33.127,0,63.737,13.839,67.114,34,3.557,21.237-26.042,40.948-67.114,40.948s-70.671-19.711-67.113-40.948C570.162,84.225,600.771,70.386,633.9,70.386Z"
					/>
					<path
						id="base_t-6"
						data-name="base_t"
						class="cls-27"
						d="M633.9,63.728c33.127,0,63.737,12.114,67.114,29.76,3.557,18.59-26.042,35.844-67.114,35.844s-70.671-17.254-67.113-35.844C570.162,75.842,600.771,63.728,633.9,63.728Z"
					/>
					<path
						id="right_o-6"
						data-name="right_o"
						class="cls-28"
						d="M578.484,18.374H689.455L664.447,109.7H603.491Z"
					/>
					<path
						id="right_t-6"
						data-name="right_t"
						class="cls-29"
						d="M568.064,65.866H699.875l-35.428,44.36H603.491Z"
					/>
					<path
						id="line-6"
						data-name="line"
						class="cls-30"
						d="M634.105,57c25.911,0,51.58,8.076,56.087,21.076,4.881,14.075-19.143,28.5-56.083,28.5s-60.966-14.426-56.087-28.5C582.527,65.072,608.194,57,634.105,57Z"
					/>
					<image
						id="icon_home_foshan"
						x="582"
						y="17"
						width="103"
						height="103"
						xlink:href="@/assets/images/center/home.png"
					/>
				</g>
				<g id="circle">
					<path
						id="white"
						class="cls-31"
						d="M414.057,225.629c96.638,0,183.089,41.729,194.7,100.322C621.763,391.613,533.734,450,417.167,450c-116.623,0-206.208-58.413-195.026-124.044C232.116,267.4,317.339,225.629,414.057,225.629Z"
					/>
					<path
						id="orange_2"
						class="cls-32"
						d="M397.666,306.9c63.817,0,120.7,28.166,126.181,67.065,5.811,41.258-50.026,77.528-124.026,77.528-74.041,0-130.915-36.294-126.336-77.528C277.8,335.086,333.819,306.9,397.666,306.9Z"
					/>
					<path
						id="blue"
						class="cls-33"
						d="M399.082,284.02c82.745,0,156.818,36,165.9,86.375,10,55.486-64.543,104.544-163.1,104.544-98.607,0-174.539-49.087-166.169-104.544C243.317,320.056,316.275,284.02,399.082,284.02Z"
					/>
					<path
						id="orange_1"
						class="cls-34"
						d="M396.909,228.952c111.911,0,212.629,47.606,229.169,115.472,19.27,79.068-85.494,150.425-225.217,150.425-139.785,0-246.6-71.391-229.688-150.425C185.681,276.624,284.878,228.952,396.909,228.952Z"
					/>
					<image
						id="light_o_3"
						x="520"
						y="324"
						width="72"
						height="92"
						xlink:href="@/assets/images/center/light_0_3.png"
					/>
					<image
						id="light_o_2"
						x="141"
						y="261"
						width="99"
						height="137"
						xlink:href="@/assets/images/center/light_0_2.png"
					/>
					<image
						id="light_o_1"
						x="436"
						y="385"
						width="99"
						height="66"
						xlink:href="@/assets/images/center/light_0_1.png"
					/>
				</g>
				<image
					id="center-house"
					x="103"
					y="120"
					width="539"
					height="419"
					xlink:href="@/assets/images/center/house.png"
				/>
				<g id="right">
					<g id="组_380" data-name="组 380">
						<path
							id="line_b_3"
							class="cls-35"
							d="M254.251,93.032s47.68,24.959,35.63,74.5,43.548,85.6,43.548,85.6"
						/>
						<path
							id="line_b_2"
							class="cls-35"
							d="M122.023,310.584s19.568,33.927,95.014-1.189,85.512,3.963,85.512,3.963"
						/>
						<path
							id="line_b_1"
							class="cls-35"
							d="M236.832,551.912s54.438-25.6,47.506-82.424,34.839-88.368,34.839-88.368"
						/>
						<path
							id="line_o_3"
							class="cls-36"
							d="M558.295,108.09s-49.1,12.55-54.633,70.932-39.193,77.669-39.193,77.669"
						/>

						<path
							id="line_o_2"
							class="cls-36"
							d="M653,387s-39.424,20.259-79-30-70.444-42.177-79-40"
						/>
						<path
							id="line_o_1"
							class="cls-36"
							d="M505,579s-31.47-27.546-17-86c12.415-50.151-42-83-42-83"
						/>

						<g id="dots_b">
							<circle
								id="dots39"
								class="cls-37"
								cx="256.219"
								cy="94.234"
								r="2.781"
							/>
							<path
								id="dots38"
								class="cls-38"
								d="M331.062,248.777a2.766,2.766,0,1,1-2.765,2.766A2.766,2.766,0,0,1,331.062,248.777Z"
							/>
							<path
								id="dots37"
								class="cls-38"
								d="M120.828,306.621a2.781,2.781,0,1,1-2.781,2.781A2.781,2.781,0,0,1,120.828,306.621Z"
							/>
							<circle
								id="dots36"
								class="cls-39"
								cx="300.938"
								cy="311.781"
								r="2.781"
							/>
							<circle
								id="dots35"
								class="cls-37"
								cx="236.422"
								cy="552.313"
								r="2.766"
							/>
							<path
								id="dots34"
								class="cls-38"
								d="M318.391,380.34a2.766,2.766,0,1,1-2.782,2.765A2.773,2.773,0,0,1,318.391,380.34Z"
							/>
							<image
								id="dots28"
								x="255"
								y="91"
								width="22"
								height="23"
								xlink:href="@/assets/images/center/dots28.png"
							/>
							<circle
								id="dots27"
								class="cls-40"
								cx="321.25"
								cy="243.625"
								r="2.375"
							/>
							<circle
								id="dots26"
								class="cls-41"
								cx="288"
								cy="184.969"
								r="2.375"
							/>
							<circle
								id="dots25"
								class="cls-42"
								cx="155.766"
								cy="326.047"
								r="2.359"
							/>
							<circle
								id="dots24"
								class="cls-43"
								cx="284.828"
								cy="298.703"
								r="2.359"
							/>
							<path
								id="dots23"
								class="cls-44"
								d="M255.547,537.652a2.375,2.375,0,1,1-2.375,2.375A2.375,2.375,0,0,1,255.547,537.652Z"
							/>
							<path
								id="dots22"
								class="cls-45"
								d="M285.641,479a2.375,2.375,0,1,1-2.375,2.375A2.375,2.375,0,0,1,285.641,479Z"
							/>
							<circle
								id="dots21"
								class="cls-46"
								cx="286.813"
								cy="436.985"
								r="2.375"
							/>
							<circle
								id="dots20"
								class="cls-47"
								cx="276.125"
								cy="112.078"
								r="1.594"
							/>
							<path
								id="dots19"
								class="cls-48"
								d="M291.578,149.308a1.579,1.579,0,1,1-1.594,1.578A1.587,1.587,0,0,1,291.578,149.308Z"
							/>
							<path
								id="dots18"
								class="cls-49"
								d="M306.625,226.965a1.594,1.594,0,1,1-1.578,1.593A1.585,1.585,0,0,1,306.625,226.965Z"
							/>
							<circle
								id="dots17"
								class="cls-50"
								cx="140.734"
								cy="323.266"
								r="1.578"
							/>
							<circle
								id="dots16"
								class="cls-51"
								cx="234.938"
								cy="302.672"
								r="1.594"
							/>
							<circle
								id="dots15"
								class="cls-52"
								cx="284.422"
								cy="465.516"
								r="1.578"
							/>
							<circle
								id="dots14"
								class="cls-53"
								cx="266.625"
								cy="528.938"
								r="1.594"
							/>
							<circle
								id="dots13"
								class="cls-54"
								cx="307.797"
								cy="393.016"
								r="1.578"
							/>
						</g>
						<g id="dots_o">
							<path
								id="dots33"
								class="cls-55"
								d="M555.906,103.715a2.766,2.766,0,1,1-2.765,2.765A2.765,2.765,0,0,1,555.906,103.715Z"
							/>
							<path
								id="dots32"
								class="cls-55"
								d="M466.437,252.34a2.766,2.766,0,1,1-2.765,2.765A2.765,2.765,0,0,1,466.437,252.34Z"
							/>
							<circle
								id="dots31"
								class="cls-56"
								cx="652.093"
								cy="385.89"
								r="2.781"
							/>
							<path
								id="dots30"
								class="cls-55"
								d="M494.937,312.558a2.766,2.766,0,1,1-2.765,2.766A2.766,2.766,0,0,1,494.937,312.558Z"
							/>
							<circle
								id="dots29"
								class="cls-56"
								cx="505.625"
								cy="576.485"
								r="2.781"
							/>
							<circle
								id="dots29-2"
								data-name="dots29"
								class="cls-56"
								cx="446.25"
								cy="409.64"
								r="2.781"
							/>
							<use id="dots12" x="516" y="118" xlink:href="#image" />
							<use id="dots11" x="505" y="304" xlink:href="#image" />
							<use id="dots10" x="572" y="353" xlink:href="#image" />
							<use id="dots09" x="486" y="555" xlink:href="#image" />
							<use id="dots08" x="479" y="465" xlink:href="#image" />
							<use id="dots07" x="499" y="158" xlink:href="#image-2" />
							<use id="dots06" x="483" y="221" xlink:href="#image-2" />
							<use id="dots05" x="470" y="239" xlink:href="#image-2" />
							<use id="dots04" x="632" y="383" xlink:href="#image-2" />
							<use id="dots03" x="564" y="346" xlink:href="#image-2" />
							<use id="dots02" x="455" y="415" xlink:href="#image-2" />
							<use id="dots01" x="482" y="455" xlink:href="#image-2" />
						</g>

						<!-- ”点“的动画，6个蓝色的点 -->
						<template v-for="item of 3" key="item">
							<circle class="cus-cls-blue" cx="0" cy="0" r="3">
								<animateMotion
									dur="6s"
									begin="0s"
									repeatCount="indefinite"
									rotate="auto"
								>
									<mpath :href="`#line_b_${item}`"></mpath>
								</animateMotion>
							</circle>

							<circle class="cus-cls-blue" cx="0" cy="0" r="3">
								<animateMotion
									dur="6s"
									begin="-3s"
									repeatCount="indefinite"
									rotate="auto"
								>
									<mpath :href="`#line_b_${item}`"></mpath>
								</animateMotion>
							</circle>
						</template>
						<!-- 6个橙色的点 -->
						<template v-for="item of 3" key="item">
							<circle class="cus-cls-orange" cx="0" cy="0" r="3">
								<animateMotion
									dur="6s"
									begin="0s"
									repeatCount="indefinite"
									rotate="auto"
								>
									<mpath :href="`#line_o_${item}`"></mpath>
								</animateMotion>
							</circle>

							<circle class="cus-cls-orange" cx="0" cy="0" r="3">
								<animateMotion
									dur="6s"
									begin="-3s"
									repeatCount="indefinite"
									rotate="auto"
								>
									<mpath :href="`#line_o_${item}`"></mpath>
								</animateMotion>
							</circle>
						</template>
					</g>
				</g>
				<g id="text">
					<text
						id="text6"
						class="cls-57"
						transform="translate(179.049 154.026) scale(0.481 0.481)"
					>
						广州
					</text>
					<text
						id="text5"
						class="cls-57"
						transform="translate(63.771 351.7) scale(0.481 0.481)"
					>
						深圳
					</text>
					<text
						id="text4"
						class="cls-57"
						transform="translate(161.75 622.618) scale(0.481 0.481)"
					>
						东莞
					</text>
					<text
						id="text3"
						class="cls-57"
						transform="translate(583.87 649.734) scale(0.481 0.481)"
					>
						珠海
					</text>
					<text
						id="text2"
						class="cls-57"
						transform="translate(719.835 441.012) scale(0.481 0.481)"
					>
						中山
					</text>
					<text
						id="text1"
						class="cls-57"
						transform="translate(637.843 173.315) scale(0.481 0.481)"
					>
						佛山
					</text>
				</g>
			</g>
		</svg>

		<!-- 防烟花特效 -->
		<img class="lingxA" src="@/assets/images/ling/lingxA.png" />
    <img class="lingxB" src="@/assets/images/ling/lingxB.png" />
    <img class="lingxC" src="@/assets/images/ling/lingxC.png" />
    <img class="lingxD" src="@/assets/images/ling/lingxD.png" />
    <img class="lingxE" src="@/assets/images/ling/lingxE.png" />
    <img class="lingxF" src="@/assets/images/ling/lingxF.png" />
	</div>
</template>

<style scoped>
.cls-1,
.cls-11,
.cls-12,
.cls-16,
.cls-17,
.cls-2,
.cls-21,
.cls-22,
.cls-26,
.cls-27,
.cls-31,
.cls-6,
.cls-7 {
	stroke: #fff;
}

.cls-1,
.cls-10,
.cls-11,
.cls-12,
.cls-15,
.cls-16,
.cls-17,
.cls-2,
.cls-20,
.cls-21,
.cls-22,
.cls-25,
.cls-26,
.cls-27,
.cls-30,
.cls-31,
.cls-5,
.cls-6,
.cls-7 {
	stroke-width: 3px;
}

.cls-1,
.cls-10,
.cls-11,
.cls-12,
.cls-13,
.cls-14,
.cls-15,
.cls-16,
.cls-17,
.cls-18,
.cls-19,
.cls-2,
.cls-20,
.cls-21,
.cls-22,
.cls-23,
.cls-24,
.cls-25,
.cls-26,
.cls-27,
.cls-28,
.cls-29,
.cls-3,
.cls-30,
.cls-31,
.cls-32,
.cls-33,
.cls-34,
.cls-35,
.cls-36,
.cls-38,
.cls-4,
.cls-44,
.cls-45,
.cls-48,
.cls-49,
.cls-5,
.cls-55,
.cls-6,
.cls-7,
.cls-8,
.cls-9 {
	fill-rule: evenodd;
}

.cls-1,
.cls-11,
.cls-16,
.cls-21,
.cls-26,
.cls-6 {
	opacity: 0.15;
}

.cls-1 {
	fill: url(#linear-gradient);
}

.cls-12,
.cls-13,
.cls-14,
.cls-17,
.cls-18,
.cls-19,
.cls-2,
.cls-22,
.cls-23,
.cls-24,
.cls-27,
.cls-28,
.cls-29,
.cls-3,
.cls-4,
.cls-7,
.cls-8,
.cls-9 {
	opacity: 0.3;
}

.cls-2 {
	fill: url(#linear-gradient-2);
}

.cls-3 {
	fill: url(#linear-gradient-3);
}

.cls-4 {
	fill: url(#linear-gradient-4);
}

.cls-10,
.cls-15,
.cls-20,
.cls-25,
.cls-30,
.cls-31,
.cls-32,
.cls-33,
.cls-34,
.cls-35,
.cls-36,
.cls-5 {
	fill: none;
}

.cls-10,
.cls-15,
.cls-20,
.cls-25,
.cls-30,
.cls-5 {
	stroke-dasharray: 12 12;
	opacity: 0.7;
}

.cls-5 {
	stroke: url(#linear-gradient-5);
}

.cls-6 {
	fill: url(#linear-gradient-6);
}

.cls-7 {
	fill: url(#linear-gradient-7);
}

.cls-8 {
	fill: url(#linear-gradient-8);
}

.cls-9 {
	fill: url(#linear-gradient-9);
}

.cls-10 {
	stroke: url(#linear-gradient-10);
}

.cls-11 {
	fill: url(#linear-gradient-11);
}

.cls-12 {
	fill: url(#linear-gradient-12);
}

.cls-13 {
	fill: url(#linear-gradient-13);
}

.cls-14 {
	fill: url(#linear-gradient-14);
}

.cls-15 {
	stroke: url(#linear-gradient-15);
}

.cls-16 {
	fill: url(#linear-gradient-16);
}

.cls-17 {
	fill: url(#linear-gradient-17);
}

.cls-18 {
	fill: url(#linear-gradient-18);
}

.cls-19 {
	fill: url(#linear-gradient-19);
}

.cls-20 {
	stroke: url(#linear-gradient-20);
}

.cls-21 {
	fill: url(#linear-gradient-21);
}

.cls-22 {
	fill: url(#linear-gradient-22);
}

.cls-23 {
	fill: url(#linear-gradient-23);
}

.cls-24 {
	fill: url(#linear-gradient-24);
}

.cls-25 {
	stroke: url(#linear-gradient-25);
}

.cls-26 {
	fill: url(#linear-gradient-26);
}

.cls-27 {
	fill: url(#linear-gradient-27);
}

.cls-28 {
	fill: url(#linear-gradient-28);
}

.cls-29 {
	fill: url(#linear-gradient-29);
}

.cls-30 {
	stroke: url(#linear-gradient-30);
}

.cls-31 {
	opacity: 0.1;
}

.cls-32,
.cls-33,
.cls-34 {
	stroke-width: 4px;
}

.cls-32 {
	stroke: url(#linear-gradient-31);
}

.cls-33 {
	stroke: url(#linear-gradient-32);
}

.cls-34 {
	stroke: url(#linear-gradient-33);
}

.cls-35 {
	stroke: #1374f1;
}

.cls-35,
.cls-36 {
	stroke-width: 2px;
	opacity: 0.8;
}

.cls-36 {
	stroke: #f97a00;
}

.cls-37,
.cls-38,
.cls-39 {
	fill: #0e68ff;
}

.cls-39 {
	opacity: 0.36;
}

.cls-40,
.cls-41,
.cls-42,
.cls-43,
.cls-44,
.cls-45,
.cls-46,
.cls-47,
.cls-48,
.cls-49,
.cls-50,
.cls-51,
.cls-52,
.cls-53,
.cls-54 {
	fill: #fff;
	opacity: 0.9;
}

.cls-40 {
	filter: url(#filter);
}

.cls-41 {
	filter: url(#filter-2);
}

.cls-42 {
	filter: url(#filter-3);
}

.cls-43 {
	filter: url(#filter-4);
}

.cls-44 {
	filter: url(#filter-5);
}

.cls-45 {
	filter: url(#filter-6);
}

.cls-46 {
	filter: url(#filter-7);
}

.cls-47 {
	filter: url(#filter-8);
}

.cls-48 {
	filter: url(#filter-9);
}

.cls-49 {
	filter: url(#filter-10);
}

.cls-50 {
	filter: url(#filter-11);
}

.cls-51 {
	filter: url(#filter-12);
}

.cls-52 {
	filter: url(#filter-13);
}

.cls-53 {
	filter: url(#filter-14);
}

.cls-54 {
	filter: url(#filter-15);
}

.cls-55,
.cls-56 {
	fill: #f97a00;
}

.cls-57 {
	font-size: 41.603px;
	fill: #338ed5;
	text-anchor: middle;
	font-family: 'Source Han Sans CN';
}

/* 点的样式 */
.cus-cls-blue {
	fill: #fff;
	opacity: 0.9;
	filter: url(#blue-filter-2);
	will-change: opacity;
}

.cus-cls-orange {
	fill: #fff;
	opacity: 0.9;
	filter: url(#orange-filter-2);
	will-change: opacity;
}

/* 城市 ICON 的动画 */
#icon_star_guangzhou{
	animation: updown 2.2s ease-in infinite;
}
#icon_home_foshan{
	animation: updown 1.9s ease-in infinite;
}
#icon_location_zhongshan{
	animation: updown 2s ease-in infinite;
}
#icon_hot_zhuhai{
	animation: updown 2s ease-in infinite;
}
#icon_earth_dongguan{
	animation: updown 1.7s ease-in infinite;
}
#icon_pie_shenzhen{
	animation: updown 1.7s ease-in infinite;
}

@keyframes updown {
	to, from {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

/* 城市灯光闪烁动画 */
.cls-3,
.cls-4,
.cls-28,
.cls-29,
.cls-8,
.cls-9,
.cls-23,
.cls-24,
.cls-18,
.cls-19,
.cls-13,
.cls-14 {
  animation: lightEffect 3s linear infinite;
}

@keyframes lightEffect {
	from, to {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
}

/* 烟花动画 */
.center-svg {
	position: relative;
}
/* 定位 */
.center-svg .lingxA {
  position: absolute;
  top: 30%;
  left: 47%;
}
.center-svg .lingxB {
  position: absolute;
  top: 35%;
  left: 58%;
}
.center-svg .lingxC {
  position: absolute;
  top: 40%;
  left: 40%;
}
.center-svg .lingxD {
  position: absolute;
  top: 28%;
  left: 41%;
}
.center-svg .lingxE {
  position: absolute;
  top: 28%;
  left: 54%;
}
.center-svg .lingxF {
  position: absolute;
  top: 40%;
  left: 53%;
}
/* 动画 */
.center-svg .lingxA {
  opacity: 0;
  animation: lingxA 2s linear infinite;
}
.center-svg .lingxB {
  opacity: 0;
  animation: lingxB 2.2s linear infinite;
}
.center-svg .lingxC {
  opacity: 0;
  animation: lingxC 1.7s linear infinite;
}
.center-svg .lingxD {
  opacity: 0;
  animation: lingxC 2.7s linear infinite;
}
.center-svg .lingxE {
  opacity: 0;
  animation: lingxB 1.2s linear infinite;
}
.center-svg .lingxF {
  opacity: 0;
  animation: lingxA 1.4s linear infinite;
}

@keyframes lingxA {
	from {
		transform: translateY(0);
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	to {
		transform: translateY(-160px);
		opacity: 0;
	}
}
@keyframes lingxB {
	from {
		transform: translateY(0);
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	60%, to {
		transform: translateY(-120px);
		opacity: 0;
	}
}
@keyframes lingxC {
	from {
		transform: translateY(0);
		opacity: 1;
	}
	30% {
		opacity: 1;
	}
	50%, to {
		transform: translateY(-90px);
		opacity: 0;
	}
}
</style>
